<template>
  <div class="patient-container bs">
    <el-row :gutter="23">
      <el-col :span="5">
        <div class="calendar bg-cf bs">
          <div class="header">
            <img
              src="@/assets/img/icon/patient/richeng.svg"
              class="mr-6"
              alt=""
            />
            <span class="c-active">咨询日程</span>
          </div>
          <Calendar @change="changeDate"></Calendar>
          <div class="c3" style="margin: 10px 0 0 16px">
            <span class="yuan"></span>
            点击日期即可查看当天的咨询病人数量
          </div>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="chat"></div>
      </el-col>
    </el-row>
    <div class="content-box">
      <div class="content-header flex flex-jus flex-align-center bg-cf">
        <div class="header-left flex flex-align-center">
          <p class="day mr-6 fz-60 c-active">
            {{ $day(time).get('date') }}
          </p>
          <div class="day-info c9 fz-20">
            <p class="mb-3">
              {{
                ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][
                  $day(time).day()
                ]
              }}
            </p>
            <p>
              {{ $day(time).get('month') + 1 }}/{{ $day(time).get('year') }}
            </p>
          </div>
        </div>
        <p>
          <span style="color: #666; font-size: 22px"
            >此日咨询<em style="color: #ff0000">{{ total }}</em
            >人</span
          >
        </p>
      </div>
      <div class="content">
        <currentItem
          class="plr"
          :info="item"
          v-for="(item, index) in list"
          :key="index"
          @showChat="dialogVisible = true"
        >
          <!-- <template #operation="">
            <el-button type="primary" class="e-button"
              >查看详情</el-button
            ></template
          > -->
        </currentItem>
        <el-pagination
          class="text-center pagination"
          :current-page="page"
          background
          :page-size="limit"
          layout="prev, pager, next"
          @current-change="changePage"
          :hide-on-single-page="true"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 聊天框的弹窗 -->
    <div class="chat">
      <el-dialog
        v-model="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <chatBox @hide="dialogVisible = false"></chatBox>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import Calendar from '@/components/Calendar.vue'
import currentItem from '@/views/main/home/cpns/currentItem.vue'
import { GetAppointmentUserList } from '@/service/api/doctor'
export default defineComponent({
  name: 'patient',
  components: {
    Calendar,
    currentItem
  },
  setup() {
    const list = ref([])
    let time = ref(new Date().valueOf())
    let limit = ref(4)
    let total = ref(0)
    let page = ref(1)
    let dialogVisible = ref(false)
    /**
     * 筛选日期
     */
    const changeDate = (date: string) => {
      time.value = new Date(date).valueOf()
      ajaxGetAppointmentUserList()
    }
    /**
     * 获取用户预约列表
     */
    const ajaxGetAppointmentUserList = () => {
      let posData = {
        page: page.value,
        limit: limit.value,
        time: time.value / 1000
      }
      GetAppointmentUserList(posData).then((res) => {
        if (res.code == 200) {
          total.value = res.data.count
          list.value = res.data.list
        }
      })
    }
    /**
     * 改变页码
     */
    const changePage = (pagenum: number) => {
      console.log(pagenum)
    }
    onMounted(() => {
      ajaxGetAppointmentUserList()
    })
    return {
      time,
      page,
      total,
      limit,
      list,
      dialogVisible,
      changePage,
      changeDate
    }
  }
})
</script>

<style lang="less" scoped>
.patient-container {
  background-color: #f7f9fe;
  padding: 60px 80px 58px;
  height: 100vh;
  .calendar {
    // width: 426px;
    // height: 450px;
    padding-bottom: 20px;
    .header {
      padding: 14px 0 11px 26px;
      border-bottom: 1px solid #f7f9fe;
      img {
        vertical-align: middle;
      }
    }
    .yuan {
      width: 12px;
      height: 12px;
      margin-right: 7px;
      display: inline-block;
      border-radius: 100%;
      background: #f2c261;
    }
  }
  .content-box {
    .content-header {
      padding-left: 30px;
      padding-right: 73px;
      margin-bottom: 13px;
    }
    margin-top: 32px;
    padding-bottom: 26px;
    .plr {
      padding: 0 80px;
    }
    .pagination {
      margin-top: 20px;
    }
  }
  .chat {
    background: pink;
  }
}
.chat :deep(.el-dialog__body) {
  padding: 0;
}
.chat :deep(.el-dialog__header) {
  padding: 0;
}
</style>
